<template>
    <a-modal
        v-model:visible="showModal"
        title="下载绑定关系表"
        :width="420"
        :destroyOnClose="true"
        :maskClosable="false"
        :confirmLoading="loading"
        @ok="onSubmit"
        @cancel="handleCancle"
    >
        <a-form class="dept-model" layout="horizontal" :model="formState" :rules="rules" ref="formRef">
            <a-form-item class="full-width" :label="t('yl.eslBelongingMerchan')" name="curMerchantCode">
                <a-select v-model:value="formState.curMerchantCode" :placeholder="t('yl.curMerchantName')" @change="handleSelect">
                    <a-select-option v-for="item in formState.curMerchants" :key="item.merchantCode">
                        {{ item.name }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item class="full-width" :label="t('yl.eslUseStore')" name="merchantCode">
                <a-select v-model:value="formState.merchantCode" :placeholder="t('yl.merchantName')">
                    <a-select-option v-for="item in formState.merchants" :key="item.merchantCode">
                        {{ item.name }}
                    </a-select-option>
                </a-select>
            </a-form-item>
        </a-form>
    </a-modal>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import _ from 'lodash';
import ylTreeselectVue from '@/components/ylTreeselect.vue';
import merchant from '@/hooks/merchantList';
interface DeptState {
    curMerchantCode: string;
    merchantCode: string | number;
}

// 表单校验规则
const initRules = (t: fn) => {
    return {
        curMerchantCode: [{ required: true, message: t('yl.eslBelongingMerchan'), trigger: 'blur' }],
        merchantCode: [{ required: true, message: t('yl.curMerchantName'), trigger: 'blur' }],
    };
};

export default defineComponent({
    name: 'roleModel',
    components: {
        ylTreeselectVue,
    },
    props: {
        visible: {
            type: Boolean,
            default: () => false,
        },
        title: {
            type: String,
        },

        loading: {
            type: Boolean,
            default: () => false,
        },
        selectCurMerchant: {
            type: Array,
            default: () => [],
        },
    },

    setup(props, { emit }) {
        const { t } = useI18n();
        // const a = reactive({
        //     showModal: computed(() => props.visible),
        //     models: computed(() => props.selectModels as NormalObj[]),
        // })
        const showModal = computed(() => props.visible);
        const formState: DeptState = reactive({
            curMerchantCode: '',
            merchantCode: '',
            curMerchants: computed(() => props.selectCurMerchant as NormalObj[]),
            merchants: [],
        });

        // 表单校验
        const rules = initRules(t);
        const formRef = ref();
        // 提交
        const onSubmit = () => {
            formRef.value.validate().then(() => {
                emit('submit', formState);
            });
        };

        // 取消
        const handleCancle = () => {
            return emit('cancle');
        };
        //选择商户查找所有门店
        const handleSelect = async (val: string) => {
            console.log(val);
            const { list, total } = await merchant({ parentCode: val });
            formState.merchants = list;
        };
        return {
            formRef,
            labelCol: { span: 8 },
            wrapperCol: { span: 16 },
            showModal,
            formState,
            t,
            rules,
            onSubmit,
            handleCancle,
            handleSelect,
        };
    },
});
</script>
<style lang="scss" scoped>
.dept-model {
    @include flexWrap;
    width: 100%;
    .ant-form-item {
        @include flex;
        width: 50%;
        margin-right: 0;
        padding-right: $width10;
        margin-bottom: $width8;
        :deep .ant-form-item-label {
            flex-basis: $formLabel;
        }
        :deep .ant-form-item-control-wrapper {
            flex: 1;
        }
        :deep .ant-form-item-children,
        :deep .ant-input-number {
            width: 100%;
        }
        &.full-width {
            width: 100%;
        }
    }
}
</style>
